import React, { Component, Fragment } from 'react';
// import styles from './index.module.scss'
import { updateWebNavIndex } from '../../../store/app/actions'
import TableView from '../../../components/tableView/index'
import Cell from '../../../components/tableView/cell/index'
import Paging, { PageInterface } from '../../../components/paging'
import FeedbackModel from '../../../models/feedbackModel'
import { Typography } from 'antd';
const { Title, Text } = Typography;


interface StateInterface {
  dataArr: Array<FeedbackModel>,
  total: number
}

interface PropsInterface {
}

class WebFeedback extends Component<PropsInterface, StateInterface> {

  state: Readonly<StateInterface> = {
    dataArr: [],
    total: 0
  }

  constructor(props: PropsInterface) {
    super(props)
    this.pageChange = this.pageChange.bind(this)
  }

  componentDidMount() {
    updateWebNavIndex('5')
  }

  pageChange(query: PageInterface) {
    FeedbackModel.getModels(query).then((data) => {
      this.setState(() => {
        return {
          dataArr: data.list,
          total: data.total
        }
      })
    }).catch(() => {

    })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {


    const cell = (model: FeedbackModel) => {

      return <Cell
        className={''}
        hover={false}
        key={model._id}>
        <Fragment>
          <Title level={4}>
            <Text style={{ paddingRight: '10px' }} type="secondary">{model.dateStr}</Text>
            {model.name}
          </Title>
          <Text>{model.content}</Text>
        </Fragment>
      </Cell>
    }

    return <div className={'w-content-box'}>
      <TableView models={this.state.dataArr} cell={cell}></TableView>
      <Paging onChange={this.pageChange} total={this.state.total}></Paging>
    </div>
  }
}

export default WebFeedback;
